<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<a href="welcome.html">返回欢迎页面</a><br/>
<div id="app">
    <table border="1">
        <tr>
            <th>工号</th>
            <th>名字</th>
            <th>性别</th>
            <th>生日</th>
            <th>结婚日期</th>
            <th>操作</th>
        </tr>
        <tr v-for="(employee,index) in employees">
            <td>{{employee.id}}</td>
            <td>{{employee.name}}</td>
            <td>{{employee.gender}}</td>
            <td>{{employee.birthday}}</td>
            <td>{{employee.wedlock}}</td>
            <td>
                <button @click="update(employee.id)">修改</button>
                <button @click="deleteEmployee(employee.id)" style="color: #ff0000">删除</button>
            </td>
        </tr>
    </table>
    <span>
    <a @click='load(1,pageSize)' href='#'>首页</a>
    <a @click='load(pageNum - 1, pageSize)' href='#' v-if="pageNum != 1">上一页</a>
    <a @click='load(i,pageSize)' href='#' v-for="i in navigatepageNums"> {{i}}</a>
    <a @click='load(pageNum + 1,pageSize )' href='#' v-if="pageNum != navigateLastPage">下一页</a>
    <a @click='load(pages,pageSize)' href='#'>尾页</a>【{{pageNum}} /{{pages}}】
    </span>
    <div>
        <span>
        <select @change="load(pageNum,pageSize)" class="pageSize" v-model="pageSize">
             <option value="5">5</option>
             <option value="10">10</option>
             <option value="15">15</option>
             <option value="20">20</option>
        </select>
        </span>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            pageNum: 1,
            pageSize: 10,
            pages: 0,
            startRow: 1,
            endRow: 10,
            employees: [{
                id: '',
                name: '',
                gender: '',
                birthday: '',
                wedlock: ''
            }],
            navigateLastPage: 10,
            navigatepageNums: []
        },
        created() {
            this.load();
        },
        methods: {
            load(pageNum, pageSize) {
                if (pageNum == null) {
                    pageNum = this.pageNum
                    pageSize = this.pageSize
                }
                axios.get("http://localhost:80/employeeList?pageNum=" + pageNum + "&&pageSize=" + pageSize)
                    .then(resp => {
                        console.log(resp)
                        let data = resp.data
                        this.employees = data.list
                        this.pageNum = data.pageNum
                        this.pageSize = data.pageSize
                        this.startRow = data.startRow
                        this.endRow = data.endRow
                        this.pages = data.pages
                        this.navigateLastPage = data.navigateLastPage
                        this.navigatepageNums = data.navigatepageNums
                        console.log(this.employees)
                    });
            },
            update(i) {
                window.location.href = "./operateEmployee.html?id=" + i
            },
            deleteEmployee(i) {
                axios.get("http://localhost:80/deleteEmployee?id=" + i).then(request => {
                    let data = request.data
                    alert(data.msg)
                    this.load();
                })
            }
        }
    })
</script>
</body>
</html>
